<template>
	<div v-if="pageLoading">
		<el-main>
			<el-skeleton :rows="8" animated />
		</el-main>
	</div>
	<div v-else>
		<el-main class="dashboard-main">
			<!-- 页面标题 -->
			<div class="page-header">
				<h1 class="page-title">数据概览</h1>
				<p class="page-subtitle">实时监控业务数据，掌握运营动态</p>
			</div>

			<!-- 时间选择器 -->
			<el-card shadow="hover" class="time-selector-card">
				<div class="time-selector-header">
					<el-icon class="time-icon"><Calendar /></el-icon>
					<span>时间范围选择</span>
				</div>
				<div class="time-selector-content">
					<div class="quick-time-buttons">
						<el-button 
							type="primary" 
							:class="{ active: timeRange === 'today' }"
							@click="selectTimeRange('today')">
							今日
						</el-button>
						<el-button 
							type="primary" 
							:class="{ active: timeRange === 'week' }"
							@click="selectTimeRange('week')">
							本周
						</el-button>
						<el-button 
							type="primary" 
							:class="{ active: timeRange === 'month' }"
							@click="selectTimeRange('month')">
							本月
						</el-button>
						<el-button 
							type="primary" 
							:class="{ active: timeRange === 'all' }"
							@click="selectTimeRange('all')">
							全部
						</el-button>
						<el-button 
							type="primary" 
							:class="{ active: timeRange === 'custom' }"
							@click="selectTimeRange('custom')">
							自定义
						</el-button>
					</div>
					<div class="custom-time-picker" v-if="timeRange === 'custom'">
						<el-date-picker
							v-model="customTimeRange"
							type="datetimerange"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							value-format="X"
							:shortcuts="timeShortcuts"
							@change="onCustomTimeChange"
						/>
						<el-button type="success" @click="queryCustomData" :loading="queryLoading">
							查询数据
						</el-button>
					</div>
					<div class="current-time-info">
						<span>当前选择：{{ getCurrentTimeText() }}</span>
						<el-button type="text" @click="refreshData" :loading="queryLoading">
							<el-icon><Refresh /></el-icon>
							刷新
						</el-button>
					</div>
				</div>
			</el-card>

			<!-- 用户数据 -->
			<el-card shadow="hover" class="data-section user-section">
				<template #header>
					<div class="section-header">
						<el-icon class="header-icon"><User /></el-icon>
						<span class="header-title">用户数据</span>
						<el-tag type="primary" size="small">会员管理</el-tag>
					</div>
				</template>
				<el-row :gutter="20">
					<el-col :lg="8" :md="12" :sm="24" :xs="24">
						<div class="business-card">
							<div class="card-header">
								<el-icon class="card-icon"><User /></el-icon>
								<span>新增注册</span>
							</div>
							<div class="card-content">
								<div class="main-stat">
									<span class="stat-value">{{ data.member.count }}</span>
									<span class="stat-unit">人</span>
								</div>
								<div class="stat-label">注册用户</div>
								<div class="sub-stat">有效会员: {{ data.member.valid.count }}人</div>
							</div>
						</div>
					</el-col>
					<el-col :lg="8" :md="12" :sm="24" :xs="24">
						<div class="business-card">
							<div class="card-header">
								<el-icon class="card-icon"><TrendCharts /></el-icon>
								<span>会员统计</span>
							</div>
							<div class="card-content">
								<div class="main-stat">
									<span class="stat-value">{{ data.member.total }}</span>
									<span class="stat-unit">人</span>
								</div>
								<div class="stat-label">总会员数</div>
								<div class="sub-stat">活跃会员: {{ data.member.active || 0 }}人</div>
							</div>
						</div>
					</el-col>
					<el-col :lg="8" :md="12" :sm="24" :xs="24">
						<div class="business-card">
							<div class="card-header">
								<el-icon class="card-icon"><DataAnalysis /></el-icon>
								<span>会员增长</span>
							</div>
							<div class="card-content">
								<div class="main-stat">
									<span class="stat-value">{{ data.member.growth || 0 }}</span>
									<span class="stat-unit">%</span>
								</div>
								<div class="stat-label">增长率</div>
								<div class="sub-stat">较上期增长</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-card>

			<!-- 订单数据 -->
			<el-card shadow="hover" class="data-section order-section">
				<template #header>
					<div class="section-header">
						<el-icon class="header-icon"><Box /></el-icon>
						<span class="header-title">订单数据</span>
						<el-tag type="success" size="small">业务订单</el-tag>
					</div>
				</template>
				<el-row :gutter="20">
					<el-col :lg="6" :md="8" :sm="12" :xs="24">
						<div class="order-card express-card">
							<div class="order-icon express-icon">
								<el-icon><Box /></el-icon>
							</div>
							<div class="order-content">
								<div class="order-title">快递订单</div>
								<div class="order-value">{{ data.press.count }}</div>
								<div class="order-unit">单</div>
								<div class="order-details">
									<div>销售: ¥{{ data.press.amount }}</div>
									<div>利润: ¥{{ data.press.commission }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :lg="6" :md="8" :sm="12" :xs="24">
						<div class="order-card meituan-card">
							<div class="order-icon meituan-icon">
								<el-icon><Food /></el-icon>
							</div>
							<div class="order-content">
								<div class="order-title">美团订单</div>
								<div class="order-value">{{ data.meituan.count }}</div>
								<div class="order-unit">单</div>
								<div class="order-details">
									<div>销售: ¥{{ data.meituan.amount }}</div>
									<div>利润: ¥{{ data.meituan.commission }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :lg="6" :md="8" :sm="12" :xs="24">
						<div class="order-card ele-card">
							<div class="order-icon ele-icon">
								<el-icon><Shop /></el-icon>
							</div>
							<div class="order-content">
								<div class="order-title">饿了么订单</div>
								<div class="order-value">{{ data.ele.count }}</div>
								<div class="order-unit">单</div>
								<div class="order-details">
									<div>销售: ¥{{ data.ele.amount }}</div>
									<div>利润: ¥{{ data.ele.commission }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :lg="6" :md="8" :sm="12" :xs="24">
						<div class="order-card jutuike-card">
							<div class="order-icon jutuike-icon">
								<el-icon><Promotion /></el-icon>
							</div>
							<div class="order-content">
								<div class="order-title">聚合推广</div>
								<div class="order-value">{{ data.jutuike.count }}</div>
								<div class="order-unit">单</div>
								<div class="order-details">
									<div>销售: ¥{{ data.jutuike.amount }}</div>
									<div>利润: ¥{{ data.jutuike.commission }}</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-card>

			<!-- 财务数据 -->
			<el-card shadow="hover" class="data-section finance-section">
				<template #header>
					<div class="section-header">
						<el-icon class="header-icon"><Money /></el-icon>
						<span class="header-title">财务数据</span>
						<el-tag type="warning" size="small">资金管理</el-tag>
					</div>
				</template>
				<el-row :gutter="20">
					<el-col :lg="8" :md="12" :sm="24" :xs="24">
						<div class="finance-card">
							<div class="card-header">
								<el-icon class="card-icon"><Money /></el-icon>
								<span>充值金额</span>
							</div>
							<div class="finance-content">
								<div class="finance-item">
									<div class="item-label">充值总额</div>
									<div class="item-value">¥{{ data.recharge.amount }}</div>
									<div class="item-sub">{{ data.recharge.count }}笔</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :lg="8" :md="12" :sm="24" :xs="24">
						<div class="finance-card">
							<div class="card-header">
								<el-icon class="card-icon"><Wallet /></el-icon>
								<span>提现金额</span>
							</div>
							<div class="finance-content">
								<div class="finance-item">
									<div class="item-label">提现总额</div>
									<div class="item-value">¥{{ data.withdraw.amount }}</div>
									<div class="item-sub">{{ data.withdraw.count }}笔</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :lg="8" :md="12" :sm="24" :xs="24">
						<div class="finance-card">
							<div class="card-header">
								<el-icon class="card-icon"><TrendCharts /></el-icon>
								<span>资金统计</span>
							</div>
							<div class="finance-content">
								<div class="finance-item">
									<div class="item-label">净流入</div>
									<div class="item-value">¥{{ data.netFlow || '0.00' }}</div>
									<div class="item-sub">充值-提现</div>
								</div>
							</div>
						</div>
					</el-col>
				</el-row>
			</el-card>
		</el-main>
	</div>
</template>

<script>
	import scStatistic from '@/components/scStatistic';
	import scEcharts from '@/components/scEcharts';
	import { 
		Calendar, 
		TrendCharts, 
		DataAnalysis, 
		User, 
		Money, 
		Wallet, 
		Box, 
		Food, 
		Shop,
		Promotion,
		Refresh
	} from '@element-plus/icons-vue';
	
	export default {
		name: "dashboard",
		components: {
			scStatistic,
			scEcharts,
			Calendar,
			TrendCharts,
			DataAnalysis,
			User,
			Money,
			Wallet,
			Box,
			Food,
			Shop,
			Promotion,
			Refresh
		},
		data() {
			return {
				pageLoading: true,
				data: {
					member: { count: 0, valid: { count: 0 }, total: 0, active: 0, growth: 0 },
					press: { count: 0, amount: '0.00', commission: '0.00' },
					meituan: { count: 0, amount: '0.00', commission: '0.00' },
					ele: { count: 0, amount: '0.00', commission: '0.00' },
					jutuike: { count: 0, amount: '0.00', commission: '0.00' },
					recharge: { count: 0, amount: '0.00' },
					withdraw: { count: 0, amount: '0.00' },
					netFlow: '0.00'
				},
				timeRange: 'all', // 时间范围：today, week, month, all, custom
				customTimeRange: null, // 自定义时间范围
				queryLoading: false, // 查询加载状态
				timeShortcuts: [
					{
						text: '今天',
						value: () => {
							const end = new Date();
							const start = new Date(end);
							start.setHours(0, 0, 0, 0);
							return [start.getTime(), end.getTime()];
						}
					},
					{
						text: '昨天',
						value: () => {
							const end = new Date();
							const start = new Date(end);
							start.setDate(end.getDate() - 1);
							start.setHours(0, 0, 0, 0);
							return [start.getTime(), end.getTime()];
						}
					},
					{
						text: '近7天',
						value: () => {
							const end = new Date();
							const start = new Date(end);
							start.setDate(end.getDate() - 6);
							start.setHours(0, 0, 0, 0);
							return [start.getTime(), end.getTime()];
						}
					},
					{
						text: '近30天',
						value: () => {
							const end = new Date();
							const start = new Date(end);
							start.setDate(end.getDate() - 29);
							start.setHours(0, 0, 0, 0);
							return [start.getTime(), end.getTime()];
						}
					},
					{
						text: '本月',
						value: () => {
							const end = new Date();
							const start = new Date(end);
							start.setDate(1);
							start.setHours(0, 0, 0, 0);
							return [start.getTime(), end.getTime()];
						}
					},
					{
						text: '上月',
						value: () => {
							const end = new Date();
							const start = new Date(end);
							start.setMonth(end.getMonth() - 1);
							start.setDate(1);
							start.setHours(0, 0, 0, 0);
							return [start.getTime(), end.getTime()];
						}
					}
				]
			}
		},
		created() {

		},
		computed: {
		},
		mounted() {
			this.onMounted()
		},
		methods: {
			async onMounted() {
				// 默认查询全部数据
				await this.queryDataByTimeRange('all');
			},
			selectTimeRange(range) {
				this.timeRange = range;
				this.customTimeRange = null; // 切换时间范围时清空自定义时间
				
				// 根据选择的时间范围自动查询数据
				if (range === 'custom') {
					// 自定义时间范围，等待用户选择具体时间
					return;
				}
				
				// 自动查询对应时间范围的数据
				this.queryDataByTimeRange(range);
			},
			onCustomTimeChange(value) {
				if (value && value.length === 2) {
					this.customTimeRange = value;
				} else {
					this.customTimeRange = null;
				}
			},
			async queryCustomData() {
				if (!this.customTimeRange || this.customTimeRange.length !== 2) {
					this.$message.warning('请选择完整的时间范围');
					return;
				}
				this.queryLoading = true;
				try {
					const [startTimestamp, endTimestamp] = this.customTimeRange;
					// 转换为 YYYY-MM-DD HH:mm:ss 格式
					const startTimeStr = this.formatDateTime(new Date(startTimestamp * 1000));
					const endTimeStr = this.formatDateTime(new Date(endTimestamp * 1000));
					
					await this.fetchData(startTimeStr, endTimeStr);
					this.timeRange = 'custom'; // 切换到自定义时间范围
					this.$message.success('数据查询成功！');
				} catch (error) {
					console.error('获取自定义数据失败:', error);
					this.$alert('获取自定义数据失败，请稍后重试', "提示", {
						type: 'error'
					});
				} finally {
					this.queryLoading = false;
				}
			},
			async queryDataByTimeRange(range) {
				this.queryLoading = true;
				try {
					let startTime, endTime;
					
					// 根据时间范围设置查询参数
					switch (range) {
						case 'today':
							startTime = new Date();
							startTime.setHours(0, 0, 0, 0);
							endTime = new Date();
							break;
						case 'week':
							startTime = new Date();
							startTime.setDate(startTime.getDate() - startTime.getDay());
							startTime.setHours(0, 0, 0, 0);
							endTime = new Date();
							break;
						case 'month':
							startTime = new Date();
							startTime.setDate(1);
							startTime.setHours(0, 0, 0, 0);
							endTime = new Date();
							break;
						case 'all':
							// 全部数据，不设置时间范围
							startTime = null;
							endTime = null;
							break;
						default:
							startTime = new Date();
							startTime.setHours(0, 0, 0, 0);
							endTime = new Date();
					}
					
					if (startTime && endTime) {
						// 转换为 YYYY-MM-DD HH:mm:ss 格式
						const startTimeStr = this.formatDateTime(startTime);
						const endTimeStr = this.formatDateTime(endTime);
						await this.fetchData(startTimeStr, endTimeStr);
					} else {
						// 全部数据，不传时间参数
						await this.fetchData('', '');
					}
					this.$message.success('数据查询成功！');
				} catch (error) {
					console.error('获取数据失败:', error);
					this.$alert('获取数据失败，请稍后重试', "提示", {
						type: 'error'
					});
				} finally {
					this.queryLoading = false;
				}
			},
			async fetchData(startTime, endTime) {
				try {
					var res = await this.$API.index.index.index.get({
						start_time: startTime,
						end_time: endTime
					});
					if (res.code == 200) {
						// 处理返回的数据，只取当前时间范围的数据
						this.data = this.processData(res.data);
						this.pageLoading = false;
					} else {
						this.$alert(res.msg, "提示", {
							type: 'error'
						});
					}
				} catch (error) {
					console.error('获取数据失败:', error);
					throw error;
				}
			},
			processData(rawData) {
				// 处理数据，后端直接返回当前时间范围的数据
				const data = {
					member: rawData.member || { count: 0, valid: { count: 0 }, total: 0, active: 0, growth: 0 },
					press: rawData.press || { count: 0, amount: '0.00', commission: '0.00' },
					meituan: rawData.meituan || { count: 0, amount: '0.00', commission: '0.00' },
					ele: rawData.ele || { count: 0, amount: '0.00', commission: '0.00' },
					jutuike: rawData.jutuike || { count: 0, amount: '0.00', commission: '0.00' },
					recharge: rawData.recharge || { count: 0, amount: '0.00' },
					withdraw: rawData.withdraw || { count: 0, amount: '0.00' },
					netFlow: '0.00'
				};
				
				// 计算净流入
				const rechargeAmount = parseFloat(data.recharge.amount) || 0;
				const withdrawAmount = parseFloat(data.withdraw.amount) || 0;
				data.netFlow = (rechargeAmount - withdrawAmount).toFixed(2);
				
				return data;
			},
			refreshData() {
				this.queryDataByTimeRange(this.timeRange);
			},
			formatDateTime(date) {
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				const hours = String(date.getHours()).padStart(2, '0');
				const minutes = String(date.getMinutes()).padStart(2, '0');
				const seconds = String(date.getSeconds()).padStart(2, '0');
				
				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			getCurrentTimeText() {
				const timeRangeTexts = {
					'today': '今日',
					'week': '本周',
					'month': '本月',
					'all': '全部数据',
					'custom': '自定义时间'
				};
				
				if (this.timeRange === 'custom') {
					if (this.customTimeRange && this.customTimeRange.length === 2) {
						const start = new Date(this.customTimeRange[0] * 1000);
						const end = new Date(this.customTimeRange[1] * 1000);
						return `${start.toLocaleDateString()} ${start.toLocaleTimeString()} - ${end.toLocaleDateString()} ${end.toLocaleTimeString()}`;
					}
					return '请选择时间范围';
				}
				
				return timeRangeTexts[this.timeRange] || '未知时间范围';
			}
		}
	}
</script>

<style scoped>
.dashboard-main {
	padding: 20px;
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	min-height: calc(100vh - 60px);
}

/* 页面标题样式 */
.page-header {
	text-align: center;
	margin-bottom: 30px;
	padding: 20px 0;
}

.page-title {
	font-size: 32px;
	font-weight: 700;
	color: #2c3e50;
	margin: 0 0 10px 0;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.page-subtitle {
	font-size: 16px;
	color: #7f8c8d;
	margin: 0;
	font-weight: 400;
}

/* 数据区域通用样式 */
.data-section {
	margin-bottom: 30px;
	border-radius: 12px;
	border: none;
	box-shadow: 0 8px 32px rgba(0,0,0,0.1);
	transition: all 0.3s ease;
}

.data-section:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

/* 区域头部样式 */
.section-header {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 18px;
	font-weight: 600;
	color: #2c3e50;
}

.header-icon {
	font-size: 24px;
	color: #409eff;
}

.header-title {
	flex: 1;
}

/* 用户数据卡片样式 */
.business-card {
	background: white;
	border-radius: 12px;
	padding: 24px;
	height: 160px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
	border: 1px solid #f0f0f0;
}

.business-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.card-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
}

.card-icon {
	font-size: 20px;
	color: #409eff;
}

.card-content {
	text-align: center;
}

.main-stat {
	margin-bottom: 12px;
}

.stat-value {
	font-size: 36px;
	font-weight: 700;
	color: #2c3e50;
	margin-right: 8px;
}

.stat-unit {
	font-size: 20px;
	color: #7f8c8d;
	font-weight: 500;
}

.stat-label {
	font-size: 16px;
	color: #7f8c8d;
	margin-bottom: 8px;
	font-weight: 500;
}

.sub-stat {
	font-size: 14px;
	color: #95a5a6;
}

/* 订单数据样式 */
.time-section {
	margin-bottom: 30px;
}

.time-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 600;
	color: #2c3e50;
}

.time-icon {
	font-size: 20px;
	color: #409eff;
}

/* 今日订单卡片 */
.order-card {
	background: white;
	border-radius: 12px;
	padding: 20px;
	height: 180px;
	display: flex;
	align-items: center;
	gap: 16px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
	border: 1px solid #f0f0f0;
}

.order-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.order-icon {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 28px;
	color: white;
	flex-shrink: 0;
}

.express-icon { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
.meituan-icon { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
.ele-icon { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
.jutuike-icon { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }

.order-content {
	flex: 1;
	min-width: 0;
}

.order-title {
	font-size: 16px;
	color: #2c3e50;
	margin-bottom: 12px;
	font-weight: 600;
}

.order-value {
	font-size: 32px;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 4px;
	line-height: 1;
}

.order-unit {
	font-size: 18px;
	color: #7f8c8d;
	margin-bottom: 12px;
	font-weight: 500;
}

.order-details {
	font-size: 13px;
	color: #95a5a6;
	line-height: 1.4;
}

.order-details div {
	margin-bottom: 4px;
}

/* 订单汇总卡片 */
.order-summary-card {
	background: white;
	border-radius: 12px;
	padding: 20px;
	height: 140px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
	border: 1px solid #f0f0f0;
}

.order-summary-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.summary-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
}

.summary-icon {
	font-size: 20px;
	color: #409eff;
}

.summary-content {
	text-align: center;
}

.summary-main {
	margin-bottom: 12px;
}

.summary-value {
	font-size: 28px;
	font-weight: 700;
	color: #2c3e50;
	margin-right: 8px;
}

.summary-unit {
	font-size: 16px;
	color: #7f8c8d;
	font-weight: 500;
}

.summary-details {
	font-size: 12px;
	color: #95a5a6;
	line-height: 1.4;
}

.summary-details div {
	margin-bottom: 4px;
}

/* 财务数据样式 */
.finance-card {
	background: white;
	border-radius: 12px;
	padding: 24px;
	height: 180px;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
	transition: all 0.3s ease;
	border: 1px solid #f0f0f0;
}

.finance-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.finance-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.finance-item {
	text-align: center;
}

.item-label {
	font-size: 14px;
	color: #7f8c8d;
	margin-bottom: 8px;
	font-weight: 500;
}

.item-value {
	font-size: 24px;
	font-weight: 700;
	color: #2c3e50;
	margin-bottom: 4px;
}

.item-sub {
	font-size: 12px;
	color: #95a5a6;
}

/* 时间选择器样式 */
.time-selector-card {
	margin-bottom: 30px;
	border-radius: 12px;
	border: none;
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.time-selector-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 600;
	color: #2c3e50;
}

.time-selector-content {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.quick-time-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
}

.quick-time-buttons .el-button {
	padding: 8px 15px;
	font-size: 14px;
	border-radius: 8px;
	transition: all 0.3s ease;
}

.quick-time-buttons .el-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

.quick-time-buttons .el-button.active {
	background-color: #409eff;
	color: white;
	border-color: #409eff;
	box-shadow: 0 4px 12px rgba(64, 158, 255, 0.4);
}

.custom-time-picker {
	display: flex;
	align-items: center;
	gap: 15px;
	padding: 20px;
	background: #f8f9fa;
	border-radius: 8px;
	border: 1px solid #e9ecef;
}

.custom-time-picker .el-date-picker {
	flex: 1;
}

.custom-time-picker .el-button {
	padding: 10px 20px;
	font-size: 14px;
	border-radius: 8px;
	white-space: nowrap;
}

.current-time-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 20px;
	background: #f8f9fa;
	border-radius: 8px;
	border: 1px solid #e9ecef;
	font-size: 14px;
	color: #7f8c8d;
}

.current-time-info .el-button {
	padding: 0;
	color: #409eff;
}

.current-time-info .el-button:hover {
	color: #66b1ff;
}

/* 响应式设计 */
@media (max-width: 1200px) {
	.business-card {
		height: 140px;
		padding: 20px;
	}
	
	.stat-value {
		font-size: 32px;
	}
	
	.order-card {
		height: 160px;
		padding: 16px;
	}
	
	.order-value {
		font-size: 28px;
	}
}

@media (max-width: 768px) {
	.dashboard-main {
		padding: 15px;
	}
	
	.page-title {
		font-size: 24px;
	}
	
	.page-subtitle {
		font-size: 14px;
	}
	
	.business-card,
	.order-card,
	.order-summary-card,
	.finance-card {
		height: auto;
		min-height: 120px;
	}
	
	.order-card {
		flex-direction: column;
		text-align: center;
		padding: 20px 16px;
	}
	
	.stat-value,
	.order-value,
	.summary-value {
		font-size: 24px;
	}
	
	.quick-time-buttons {
		justify-content: center;
	}
	
	.quick-time-buttons .el-button {
		flex: 1;
		min-width: 80px;
	}
	
	.custom-time-picker {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}
	
	.custom-time-picker .el-date-picker {
		width: 100%;
	}
	
	.current-time-info {
		flex-direction: column;
		gap: 10px;
		text-align: center;
	}
}

@media (max-width: 480px) {
	.dashboard-main {
		padding: 10px;
	}
	
	.page-header {
		margin-bottom: 20px;
		padding: 15px 0;
	}
	
	.page-title {
		font-size: 20px;
	}
	
	.data-section {
		margin-bottom: 20px;
	}
	
	.business-card,
	.order-card,
	.order-summary-card,
	.finance-card {
		padding: 16px;
	}
	
	.quick-time-buttons .el-button {
		font-size: 12px;
		padding: 6px 10px;
	}
	
	.time-selector-header {
		font-size: 16px;
	}
}
</style>
